import React from 'react'

export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  label?: string
  error?: string
  helperText?: string
  leftIcon?: React.ReactNode
  rightIcon?: React.ReactNode
}

const Input: React.FC<InputProps> = ({
  label,
  error,
  helperText,
  leftIcon,
  rightIcon,
  className = '',
  ...props
}) => {
  const inputClasses = `
    w-full px-4 py-2.5 border rounded-xl
    bg-white hover:bg-gray-50
    focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-400
    transition-all duration-200 shadow-sm hover:shadow-md
    ${error 
      ? 'border-red-400 focus:ring-red-500/50 focus:border-red-500 bg-red-50/50' 
      : 'border-gray-300 hover:border-gray-400'
    }
    ${leftIcon ? 'pl-11' : ''}
    ${rightIcon ? 'pr-11' : ''}
    disabled:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-60
    ${className}
  `.trim().replace(/\s+/g, ' ')

  return (
    <div className="w-full">
      {label && (
        <label className="block text-sm font-semibold text-gray-700 mb-2">
          {label}
        </label>
      )}
      
      <div className="relative">
        {leftIcon && (
          <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
            <div className="text-gray-400">
              {leftIcon}
            </div>
          </div>
        )}
        
        <input
          className={inputClasses}
          {...props}
        />
        
        {rightIcon && (
          <div className="absolute inset-y-0 right-0 pr-3 flex items-center">
            <div className="text-gray-400">
              {rightIcon}
            </div>
          </div>
        )}
      </div>
      
      {error && (
        <p className="mt-1 text-sm text-red-600">
          {error}
        </p>
      )}
      
      {helperText && !error && (
        <p className="mt-1 text-sm text-gray-500">
          {helperText}
        </p>
      )}
    </div>
  )
}

export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
  label?: string
  error?: string
  helperText?: string
  rows?: number
}

const TextArea: React.FC<TextAreaProps> = ({
  label,
  error,
  helperText,
  rows = 3,
  className = '',
  ...props
}) => {
  const textareaClasses = `
    w-full px-4 py-2.5 border rounded-xl
    bg-white hover:bg-gray-50
    focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-400
    transition-all duration-200 shadow-sm hover:shadow-md
    resize-y
    ${error 
      ? 'border-red-400 focus:ring-red-500/50 focus:border-red-500 bg-red-50/50' 
      : 'border-gray-300 hover:border-gray-400'
    }
    disabled:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-60
    ${className}
  `.trim().replace(/\s+/g, ' ')

  return (
    <div className="w-full">
      {label && (
        <label className="block text-sm font-semibold text-gray-700 mb-2">
          {label}
        </label>
      )}
      
      <textarea
        rows={rows}
        className={textareaClasses}
        {...props}
      />
      
      {error && (
        <p className="mt-1 text-sm text-red-600">
          {error}
        </p>
      )}
      
      {helperText && !error && (
        <p className="mt-1 text-sm text-gray-500">
          {helperText}
        </p>
      )}
    </div>
  )
}

// 添加TextArea作为Input的静态属性
Input.TextArea = TextArea

// 导出TextArea类型
export type { TextAreaProps }

export default Input
